<template>
  <div class="page white-stage">
    <div class="normal-client-detail">
      <div class="client-detail-body">
        <div class="client-desc">
          <span class="img-wrapper"><img data-object-fit="cover" :src="client.head_img_url" /></span>
          <span class="social-name">{{ client.nick_name }}</span>
          <span class="social-mobile_num grey" style="color:#B2B2B2!important!;">{{ client.mobile_num }}</span>
          <span class="ico grey">▶</span>
        </div>

        <div class="property-items">
          <span>状态：
            {{ client.custom_status | getStatename }}
            <i class="alter-link">更改<client-status :client="client"></client-status></i>
          </span>
          <span>状态：
            {{ client.source_id | getUserSource }}
            <i class="alter-link">更改<client-sources :client="client"></client-sources></i>
          </span>
        </div>

        <!-- <div class="label-list">
          <label v-for="(label, index) in client.labels " :key="index" class="label-item">
            <router-link :to="label.link">{{ label.name }}</router-link>
          </label>
        </div> -->
      </div>
      <scroller class="pdscroll" style="top:7rem;"  :on-refresh="refresh" ref="my_scroller" :noDataText="noDataText">
        <section class="timeline-wrap">
           <div class="timeline" >
           <div v-for="(fulldata, index) in clueList">
             <div class="timeline-block date-block">
             <div class="date-mark picture"></div>
             <div class="date-content">{{ fulldata.date }}</div>
             </div>

             <div v-for="(clue, mskey, msi) in fulldata.clues" class="timeline-block" :class="{'left': mskey % 2 == 0, 'right': mskey % 2 !== 0 }">
               <router-link class="timeline-img picture" to="/client-info">
                 <img :src="clue.head_img_url" alt="Picture">
               </router-link>

               <div class="timeline-content">
                 <h2><span class="mark">预约跟进</span><i class="date-ico">{{ clue.insert_time }}</i></h2>
                 <p>{{ clue.clue_desc }}</p>
                 <p v-if="clue.imgs"><img v-for="(image, index) in clue.imgs" class="messageImg" :src="image.url" /></p>
                 <p v-if="clue.clue_location">跟进位置：{{ clue.clue_location }}</p>
                 <!-- <p v-if="messages.notiUser">通知他人：{{ clue.notiUser }}</p> -->
               </div>
             </div>
           </div>
           </div>
         </section>
       </scroller>

       <div class="menu-wrapper">
        <client-menu @select-menu="menuItemSelected" :itemList="itemList"></client-menu>
      </div>
    </div>
    <x-dialog :value="this.$store.state.app.dialogShow" @input="handleDialog">
      <div class="dialog-message">
        {{ this.$store.state.app.dialogMessage }}
      </div>
    </x-dialog>
  </div>
</template>

<script>

  import Vue from 'vue'
  import clientMenu from '../components/client-menu'
  import ClientStatus from '../components/client-status'
  import ClientSources from '../components/client-sources'
  import store from '../store'
  import Scroller from 'vue-scroller'
  import {XDialog} from 'vux'
  import { UPDATE_CLIENT_DETAIL } from '../store/mutation-types';

  export default{
    props:{
      // client: {
      //   type : Object,
      //   require: true
      // }
    },
    data () {
      return {
         imgServer : this.$store.state.app.imgServer,
         containerHeight : 'height:'+document.body.scrollHeight+'px;',
         itemList:[],
         custom_id: '',
         client:{},
         page_size : 5,
         page_index: 1,
         custom_type: 0,
         allClues:{},
         clueList : {},
         clues: [],
         noDataText:'',
         originNoDataText:'暂无跟进线索',
         allmessages:[
          {
            'date' : '2017-3-08 星期三',
            'messages': [
              {
              stateLink:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
              custom_status: '0',
              message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
              link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              location:'广东省广州市天河区华夏路',
              notiUser: '林丽勤',
              images: [
                {
                url: 'http://img4.imgtn.bdimg.com/it/u=800335121,3356819213&fm=23&gp=0.jpg',
                },
                {
                url: 'http://img1.imgtn.bdimg.com/it/u=2540796225,385730206&fm=23&gp=0.jpg',
                },
                {
                url: 'http://img4.imgtn.bdimg.com/it/u=3364481296,3190728730&fm=11&gp=0.jpg',
                }
              ]
             },
             {
              stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
              custom_status: '0',
              message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
              link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              location:'广东省广州市天河区华夏路',
              notiUser: '林丽勤',
              images: [
                {
                url: 'http://img3.imgtn.bdimg.com/it/u=1961566504,1820026229&fm=23&gp=0.jpg',
                },
                {
                url: 'http://img3.imgtn.bdimg.com/it/u=1473153254,2063169475&fm=23&gp=0.jpg',
                },
                {
                url: 'http://img2.imgtn.bdimg.com/it/u=485253929,4188129811&fm=23&gp=0.jpg',
                }
              ]
             },
             {
              stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
              custom_status: '0',
              message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
              link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              location:'广东省广州市天河区华夏路',
              notiUser: '林丽勤',
             },
             {
              stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
              custom_status: '0',
              message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
              link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
              location:'广东省广州市天河区华夏路',
              notiUser: '林丽勤',
             }
           ]
           },

           {
             'date' : '2017-3-08 星期三',
             'messages': [
             {
               stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
               head_img_url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D360/sign=e105b9f1d61b0ef473e89e58edc651a1/b151f8198618367a9f738e022a738bd4b21ce573.jpg',
               custom_status: '0',
               message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
               link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
            },

            {
               stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
               head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
               custom_status: '0',
               message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
               link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
            },


            {
               stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
               head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
               custom_status: '0',
               message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
               link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
            },

            {
               stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
               head_img_url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
               custom_status: '0',
               message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
               link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
            }
          ]
          }
         ]
      };
    },
    methods: {
      refresh (iscroll) {
        console.log('refresh')
        this.getClues();
      },

      handleDialog () {

      },
      log () {
        console.log('ee');
      },

      load (iscroll) {
        console.log('load')
        // Load new data
      },

      test () {
        console.log('test')
      },

      menuItemSelected (item) {
        if(item.to.path === 'h5-marketing') {
          this.sendH5()
        }
        else if(item.to.path === 'send-card') {
          this.sendCard()
        }
      },

      initItemList(id) {
        let followPath =  'h5-marketing'
        let custom_type = this.custom_type

        if(custom_type === 1) {
          followPath = 'order-audition'
        }

        this.itemList = [
          {
            title: '编辑',
            to : {path:'edit-normal-client', query:{id: this.custom_id, custom_type:this.custom_type, suid:this.client.suid}}
          },

          {
            title: '写跟进',
            to : {path:'add-follow', query:{id: this.custom_id, custom_type:this.custom_type, suid:this.client.suid}}
          },

          {
            title: '约试听',
            isLink: false,
            to : {path:followPath, query:{id: this.custom_id, custom_type:this.custom_type, suid:this.client.suid}}
          },
          {
            title: '发名片',
            isLink: false,
            isShow: custom_type === 0,
            to : {path:'send-card', query:{id: this.custom_id, custom_type:this.custom_type, suid:this.client.suid}}
          }
        ];

      },

      getClues(data) {

        var data = Object.assign({
          page_size: this.page_size,
          custom_type: this.custom_type,
          page_index: this.page_index,
          own: '',
          custom_id: this.custom_id,

        }, data || {});

        let that = this;

        store.dispatch('getClues', data).then(function(response){
          let data = response.data;

          if(that.clues.length) {
            that.noDataText = '';
          }
          if(response.data.errcode === 0) {
            setTimeout(() => {

              that.clues = that.clues.concat(data.results.data);

              that.clues.forEach(function(object, index) {
                let insertDate = object.insert_time.split(' ')[0];
                console.log(insertDate)

                if(typeof that.allClues[insertDate]  === 'undefined') {
                  that.allClues[insertDate] = {'date' : insertDate, 'clues' : [object]};
                } else {
                  that.allClues[insertDate].clues.push(object);
                }
              });

              that.clueList = that.allClues
              that.page_index++

              setTimeout(() => {
                if (that.$refs.my_scroller) {
                  that.$refs.my_scroller.finishInfinite(true);
                  that.$refs.my_scroller.finishPullToRefresh();
                }
              }, 200)

            }, 1000)


          } else {
            alert('系统服务异常！请联系管理员!');
          }
        });
      },

      getCustomInfoById(id){

        let that = this;

        store.dispatch('getCustomInfoById', id).then(function(response){

          if(response.data.errcode === 0) {
            that.client = response.data.results;
            let clientsDetail = Object.assign(that.clientsDetail, {[id]:that.client});
            console.debug('JSON.stringify(clientsDetail)', JSON.stringify(clientsDetail));
            store.commit(UPDATE_CLIENT_DETAIL, clientsDetail);
            console.log(that.$store.state.app)
          } else {
            console.debug('系统服务异常！请联系管理员! ');
            alert(response.data.errmsg)
            that.$router.back();
          }
          }).catch(function(error){
          console.log(error);
        })
      },

      sendH5() {

        let data = {
          custom_id: this.custom_id,
          h5_id: 1
        }

        store.dispatch('sendH5', data).then((response) => {
          if(response.data.errcode === 0) {
            alert('下发成功！')
          } else {
            alert(response.data.errmsg)
          }
        })
      },

      sendCard() {
        let data = {
          custom_id: this.custom_id
        }
        store.dispatch('sendCard', data).then((response) => {
          alert(response.data.errmsg)
        })
      },

      saveClue () {

        console.log(JSON.stringify(this.follow), 'JSON.stringify(this.follow)');

        // this.$router.back();

        store.dispatch('saveClues', this.follow).then((response) => {
          if(response.data.errcode == 0) {
            alert('保存线索成功！');
            this.$router.back();
          } else {
            alert('系统出错!')
          }
        })
      }

    },

    components:{
      clientMenu,
      Scroller,
      ClientStatus,
      ClientSources,
      XDialog
    },

    mounted () {

      let clientID = this.$route.query.custom_id;

      console.debug('this.$route.query.custom_type', JSON.stringify(this.$route.query));

      this.noDataText = this.originNoDataText;
      this.custom_id = clientID;
      this.custom_type = parseInt(this.$route.query.custom_type);

      this.getCustomInfoById(clientID)
      this.getClues()

      this.callJsApi('biz.navigation.setTitle',{title:'客户详情'});
    },

    watch:{
      client () {
        this.initItemList();
      },

      allClues () {
        console.log(this.allClues)
      }
    },

    computed:{
      clientsDetail () {
        return this.$store.state.app.clientsDetail;
      }
    }
  }
</script>

<style lang="less">
  @import '../less/index.less';
  @import '../less/timeline.less';

  .normal-client-detail {

    .menu-wrapper{
      position: fixed;
      left:0;
      bottom: 0;
      z-index: 100;
      width: 100%;
    }

    .client-detail-body{
       padding-top: 18px;
       padding-left: 20px;
       border-bottom: 1px solid #eee;;
       padding-bottom: 10px;
       position: fixed;
       left:0;
       top:0;
       z-index: 100;
       background-color: white;
       width: 100%;
    }

    .timeline-wrap{
      // padding-top: 6em;
      padding-bottom: 2em;
    }

    .messageImg{
      width: 30%;
      height: 60px;
      object-fit: cover;
    }

    .messageImg:not(:last-child){
      margin-right: 2%;
    }

     .alter-link{
       color: #35ADFF;
       border-bottom: 1px solid #35ADFF;
       position: relative;
       font-style: normal;
     }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }

    }


    .img-wrapper {

      width: 2.5em;
      height: 2.5em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }


    .property-items{
      &:extend(.clearfix all);
      padding: 10px 0;

      &>span{
        float: left;
        line-height: 15px;
        height: 15px;
        padding-right: 12px;
        font-size: 14px;
      }

      &>span:not(:last-child) {
        border-right: 1px solid #B2B2B2;
      }

      &>span:not(:first-child) {
        padding-left: 12px;
      }
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
    }

    .grey{
      color: #B2B2B2!important;
    }

    .ico.grey{
      font-size: 12px;
      color:#9C9C9C;
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

    .scroll-view{
      background-color: white;
    }

  }

</style>
